<script setup>
  import { ref, computed } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import FilterNavbar from '@/components/FilterNavbar'
  import Common from './components/common/common.vue'
  import Pay from './components/pay/pay.vue'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('contractListsEnums')
  const tabs = ['普通版合同', '付费版合同']
  const searchListPay = computed(() => {
    return [
      {
        prop: 'orderType',
        label: '业务类型',
        type: 'picker',
        attrs: {
          options: dict.orderType,
        },
      },
      {
        prop: 'contractType',
        label: '合同服务类型',
        type: 'picker',
        attrs: {
          options: dict.contractType,
        },
      },
      {
        prop: 'leaseType',
        label: '承租人类型',
        type: 'picker',
        attrs: {
          options: dict.leaseType,
        },
      },
      {
        prop: 'siteList',
        label: '所属门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          params: {
            idList: queryParam.value.siteIdList,
          },
        },
      },
      {
        prop: ['startTimeStart', 'startTimeEnd'],
        label: '发起签署时间',
        type: 'daterange-picker',
      },
      {
        prop: ['completeTimeStart', 'completeTimeEnd'],
        label: '完成签署时间',
        type: 'daterange-picker',
      },
      {
        prop: 'startPersonIdList',
        label: '发起人',
        type: 'remote-select',
        attrs: {
          type: 'store_staff_list_Limit',
          multiple: true,
        },
      },
      {
        prop: 'createWay',
        label: '创建方式',
        type: 'picker',
        attrs: {
          options: dict.createWay,
        },
      },
    ]
  })

  const searchList = computed(() => {
    return [
      {
        prop: 'orderType',
        label: '业务类型',
        type: 'picker',
        attrs: {
          options: dict.orderType,
        },
      },
      {
        prop: 'contractType',
        label: '合同服务类型',
        type: 'picker',
        attrs: {
          options: dict.freeContractType,
        },
      },
      {
        prop: 'leaseType',
        label: '承租人类型',
        type: 'picker',
        attrs: {
          options: dict.leaseType,
        },
      },
      {
        prop: 'siteList',
        label: '所属门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          params: {
            idList: queryParam.value.siteIdList,
          },
        },
      },
      {
        prop: ['startTimeStart', 'startTimeEnd'],
        label: '发起签署时间',
        type: 'daterange-picker',
      },
      {
        prop: ['completeTimeStart', 'completeTimeEnd'],
        label: '完成签署时间',
        type: 'daterange-picker',
      },
      {
        prop: 'startPersonIdList',
        label: '发起人',
        type: 'remote-select',
        attrs: {
          type: 'store_staff_list_Limit',
          multiple: true,
        },
      },
    ]
  })

  const actived = ref(0)
  const tabsChange = (e) => {
    console.log(e)
    queryParam.value = {}
    actived.value = e
  }

  const queryParam = ref({})
  const onFilterNavbarConfirm = (params) => {
    if (params.times) {
      queryParam.value.entranceDateStart = params.times[0]
      queryParam.value.entranceDateEnd = params.times[1]
    }
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    loadData(queryParam.value)
  }
  const commonDom = ref(null)
  const payDom = ref(null)
  const loadData = (queryParam) => {
    if (actived.value == 0) {
      commonDom.value.init(queryParam)
    } else {
      payDom.value.init(queryParam)
    }
  }

  onShow(() => {})
</script>

<template>
  <view class="container">
    <FilterNavbar :searchList="actived == 1 ? searchListPay : searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <ve-tabs :actived="actived" :list="tabs" @change="tabsChange" style="background: #ffffff"></ve-tabs>
      </template>
    </FilterNavbar>
    <Common v-if="actived == 0" ref="commonDom" :param="queryParam" />
    <Pay v-if="actived == 1" ref="payDom" :param="queryParam" />
  </view>
</template>

<style lang="scss" scoped>
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
    overflow: hidden;
    padding-bottom: 132rpx;
  }
</style>
